<template>
	<view class="container">
		<view class="course-item">
			<view class="course-content">
				<view class="img-wrapper" v-if="proInfo.pic">
					<image class="pic" :src="proInfo.pic"></image>
				</view>
				<view class="uni-flex uni-row banner" style="-webkit-justify-content: space-between;justify-content: space-between;">
					<text class="title" >{{proInfo.name}}</text>
					<text class="price"><span class="money">{{proInfo.need_money}}</span>元</text>
				</view>
				<text class="introduce">
					{{proInfo.describe}}
				</text>
			</view>
			<button type="primary" @click="add_user()">点击报名</button>
		</view>
	</view>
</template>

<script>
import request_async from '../../common/request_async.js';
export default {
	computed: {
	},
	data() {
		return {
			proInfo: {
				title: "新品上市，全场满199减50",
				time: "昨天 12:30",
				readed: false,
				content: `
					testing
					`,
			},
		};
	},
	onShow() {
		uni.setNavigationBarTitle({
		    title: '课程报名'
		});
	},
	methods:{
		
	},
	async onLoad(options) {
		
		if(options.id == undefined){
			uni.navigateTo({
				url: `/pages/course/index`
			})
			return false;
		}
		var res = await request_async({
			name: 'courseuser.detail',
			method: 'POST',
			data: {id : options.id}
		})
		if(res.code != 0 || res.data == null){
			return false;
		}
		
		this.proInfo = res.data;
		console.log('detail study: ', this.proInfo)
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	/* padding-bottom: 160upx; */
}
.course-item{
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;
		.course-content {
			width: 710upx;
			padding: 0 24upx;
			background-color: #fff;
			border-radius: 4upx;
		}
		.banner {
			flex-grow: 2;
			display: flex;
			height: 90upx;
			font-size: 30rpx;
			align-items: center;
			.title {
				color: #303133;
			}
			.price {
				float: right;
				font-weight: bold;
			}
			.money {
				color: red;
			}
		}
		.img-wrapper {
			width: 100%;
			height: 260upx;
			position: relative;
		}
		.pic {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 6upx;
		}
		.cover {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .5);
			font-size: 36upx;
			color: #fff;
		}
		.introduce {
			display: inline-block;
			padding: 16upx 0;
			font-size: 28upx;
			line-height: 38upx;
		}
		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90upx;
			font-size: 24upx;
			color: #707070;
			position: relative;
		}
		.more-icon {
			font-size: 32upx;
		}	
	}

</style>
